<!--
 * @Author: miaosir 1825742455@qq.com
 * @Date: 2023-10-25 11:08:37
 * @LastEditors: miaosir 1825742455@qq.com
 * @LastEditTime: 2023-11-16 09:54:29
 * @FilePath: \qcy_webc:\Users\Administrator\Desktop\时间倒计时.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>时间倒计时</title>
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #app {
        background-image: url(./assets/image/gloomySunday.jpg);
        background-size: cover;
        height: 100vh;
        .mask {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          .date_picker {
            width: 15vw;
            height: 5vw;
            border-radius: 1vw;
            font-weight: 700;
            .el-input__inner {
              width: 100%;
              height: 100%;
              border-radius: 1vw;
              font-size: 1vw;
              font-weight: 700;
            }
          }
        }
        .countdown {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          font-weight: 700;
          .first {
            color: rgba(173, 255, 47, 0.2);
            font-size: 40px;
          }
          .showText {
            color: rgba(173, 255, 47, 0.4);
            font-size: 50px;
          }
          .second {
            color: rgba(173, 255, 47, 0.6);
            font-size: 60px;
          }
          .third {
            color: rgba(173, 255, 47, 0.8);
            font-size: 70px;
          }
          .fourth {
            color: rgba(173, 255, 47, 1);
            font-size: 80px;
          }
          .node {
            position: absolute;
            top: 0;
            left: 0;
            width: 10%;
            display: flex;
            flex-direction: column;
          }
        }
      }
      button {
        z-index: 1;
        font-size: 24px;
        font-family: inherit;
        color: white;
        padding: 0.5em 1em;
        outline: none;
        border: none;
        background-color: rgba(13, 72, 172, 0.5);
      }

      button:hover {
        cursor: pointer;
        animation: jelly 0.5s;
      }

      @keyframes jelly {
        0%,
        100% {
          transform: scale(1, 1);
        }
        25% {
          transform: scale(0.9, 1.1);
        }
        50% {
          transform: scale(1.1, 0.9);
        }
        75% {
          transform: scale(0.95, 1.05);
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <div class="mask"> -->
      <!-- v-if="!countdownTime" -->
      <!-- <el-button class="button" type="success">点击选择要倒计的时间</el-button> -->
      <!-- <el-date-picker -->
      <!-- v-model="countdownTime" -->
      <!-- class="date_picker" -->
      <!-- type="datetime" -->
      <!-- placeholder="请选择要倒计的时间" -->
      <!-- default-time="12:00:00"> -->
      <!-- </el-date-picker> -->
      <!-- </div> -->
      <el-dialog
        title="自定义时间"
        width="300px"
        :visible.sync="dialogVisible"
        @close="customBtnCancel"
      >
        <el-date-picker
          v-model="customTime"
          :picker-options="option"
          @change="handleChange"
          class="date_picker"
          type="datetime"
          placeholder="请选择要倒计的时间"
          default-time="12:00:00"
        >
        </el-date-picker>
        <span slot="footer" class="dialog-footer">
          <el-button @click="customBtnCancel">取 消</el-button>
          <el-button type="primary" @click="customBtnOk">确 定</el-button>
        </span>
      </el-dialog>
      <div class="countdown">
        <div class="node">
          <button @click="countdownBtn('offDuty')">下班倒计时</button>
          <button @click="countdownBtn('weekend')">周末倒计时</button>
          <button @click="countdownBtn('endMonth')">月底倒计时</button>
          <button @click="countdownBtn('newYearSDay')">元旦倒计时</button>
          <button @click="countdownBtn('pureBrightness')">清明倒计时</button>
          <button @click="countdownBtn('fiveOne')">五一倒计时</button>
          <button @click="countdownBtn('nationalDay')">国庆倒计时</button>
          <button @click="customBtn">自定倒计时</button>
        </div>
        <span class="first">距离</span>
        <span class="showText">{{showText}}</span>
        <span class="second">{{formatTime(countdownTime)}}</span>
        <span class="third">还有</span>
        <span class="showRemainingTime fourth">{{showRemainingTime}}</span>
      </div>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          countdownTime: new Date("2024-2-10"),
          showRemainingTime: "",
          showText: "",
          customTime: null,
          dialogVisible: false,
          option: {
            disabledDate: (time) => {
              return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;
            },
          },
          flag: null,
        };
      },
      watch: {
        countdownTime: function (val) {
          console.log(val);
        },
      },
      created() {
        this.countdownBtn("offDuty");
        this.formatDay();
        this.flag = setInterval(() => {
          this.formatDay();
        }, 1);
        this.getData();
      },
      methods: {
        // 帮我写一个原生的ajax请求
        async getData() {
          // https://opendata.baidu.com/api.php?t=1674981971139&query=2023%E5%B9%B42%E6%9C%88&format=json&resource_id=39043&tn=wisetpl&cb=callback
          function jsonp(option) {
            let param = "";
            // 拼接data里参数
            for (const key in option.data) {
              param += "&" + key + "=" + option.data[key];
              // console.log(param, "param");
            }
            // 将随机产生的函数挂载到全局以便后端返回这个函数能够执行
            window['callback'] = option.success;
            // 拼接完整的url请求
            let url = option.url + "?" + param;
            console.log(url, "url");
            // 动态创建script标签
            let script = document.createElement("script");
            // 添加src
            script.src = url;
            // 追加到页面
            document.body.appendChild(script);
            // console.log(script);
            // script支持onload事件。在script标签完成请求后移除
            script.onload = function () {
              document.body.removeChild(script);
            };
          }
          jsonp({
            // 天气预报
            url: "https://opendata.baidu.com/api.php",
            data: {
              t: "1674981971139",
              query: encodeURIComponent('2024年2月'),
              format: 'json',
              resource_id: "39043",
              tn: "wisetpl",
              cb:'callback'
            },
            success: function (data) {
              // console.log(data, "data");
              // findSpringFestival(data.data[0])
            },
          });
        },
        findSpringFestival(){},
        // 帮我写一个格式化时间的函数
        formatTime(time) {
          return (
            time.getFullYear() +
            "-" +
            (time.getMonth() + 1) +
            "-" +
            time.getDate() +
            " " +
            time.getHours() +
            ":" +
            time.getMinutes() +
            ":" +
            time.getSeconds()
          );
        },
        // 将毫秒数转为多少天多少小时多少分钟多少秒的函数
        formatDay() {
          let time = this.countdownTime - new Date();
          let day = Math.floor(time / (1000 * 60 * 60 * 24));
          let hour = String(
            Math.floor((time - day * 1000 * 60 * 60 * 24) / (1000 * 60 * 60))
          ).padStart(2, "0");
          let minute = String(
            Math.floor(
              (time - day * 1000 * 60 * 60 * 24 - hour * 1000 * 60 * 60) /
                (1000 * 60)
            )
          ).padStart(2, "0");
          let second = String(
            Math.floor(
              (time -
                day * 1000 * 60 * 60 * 24 -
                hour * 1000 * 60 * 60 -
                minute * 1000 * 60) /
                1000
            )
          ).padStart(2, "0");
          let millisecond = String(
            time -
              day * 1000 * 60 * 60 * 24 -
              hour * 1000 * 60 * 60 -
              minute * 1000 * 60 -
              second * 1000
          ).padStart(3, "0");
          this.showRemainingTime =
            day +
            "天" +
            hour +
            "小时" +
            minute +
            "分钟" +
            second +
            "秒" +
            millisecond;
          if (time <= 0) {
            clearInterval(this.flag);
            this.showRemainingTime = "0天0小时0分钟0秒0毫秒";
            this.flag = null;
          }
        },
        countdownBtn(festival) {
          console.log(festival);
          festival === "offDuty" && this.offDuty();
          festival === "weekend" && this.weekend();
          festival === "endMonth" && this.endMonth();
          festival === "newYearSDay" && this.newYearSDay();
          festival === "pureBrightness" && this.pureBrightness();
          festival === "fiveOne" && this.fiveOne();
          festival === "nationalDay" && this.nationalDay();
        },

        // 下班倒计时
        offDuty() {
          this.showText = "下班";
          // 获取当前时间
          let nowTime = new Date();
          // 获取下班时间
          let offDutyTime = new Date(
            nowTime.getFullYear(),
            nowTime.getMonth(),
            nowTime.getDate(),
            18,
            0,
            0
          );
          // 设置倒计时时间
          this.countdownTime = offDutyTime;
          // 格式化剩余时间
          this.formatDay();
        },
        // 周末倒计时
        weekend() {
          this.showText = "周末";
          // 获取当前时间
          let nowTime = new Date();
          // 获取周末时间
          let currentWeek = nowTime.getDay();
          let weekendTime = new Date(
            nowTime.getFullYear(),
            nowTime.getMonth(),
            nowTime.getDate() + 5 - currentWeek,
            18,
            0,
            0
          );
          // 设置倒计时时间
          this.countdownTime = weekendTime;
          // 格式化剩余时间
          this.formatDay();
        },
        // 月底倒计时
        endMonth() {
          this.showText = "月底";
          // 获取当前时间
          let nowTime = new Date();
          // 获取本月最后一天
          let lastDay = new Date(
            nowTime.getFullYear(),
            nowTime.getMonth() + 1,
            0
          ).getDate();
          // 获取本月最后一天时间
          let lastDayTime = new Date(
            nowTime.getFullYear(),
            nowTime.getMonth(),
            lastDay,
            0,
            0,
            0
          );
          // 设置倒计时时间
          this.countdownTime = lastDayTime;
          // 格式化剩余时间
          this.formatDay();
        },
        // 元旦倒计时
        newYearSDay() {
          this.showText = "元旦";
          // 获取当前时间
          let nowTime = new Date();
          // 获取元旦时间
          let newYearTime = new Date(nowTime.getFullYear() + 1, 0, 1, 0, 0, 0);
          // 设置倒计时时间
          this.countdownTime = newYearTime;
          // 格式化剩余时间
          this.formatDay();
        },
        // 清明节倒计时
        pureBrightness() {
          this.showText = "清明节";
          // 获取当前时间
          let nowTime = new Date();
          console.log(nowTime.getMonth() + 1);
          console.log(nowTime.getDate());
          // 获取清明节时间
          let pureBrightnessTime;
          if (
            nowTime.getMonth() + 1 > 4 ||
            (nowTime.getMonth() + 1 === 4 && nowTime.getDate() >= 4)
          ) {
            pureBrightnessTime = new Date(
              nowTime.getFullYear() + 1,
              3,
              4,
              0,
              0,
              0
            );
          } else if (
            nowTime.getMonth() + 1 < 4 ||
            (nowTime.getMonth() + 1 === 4 && nowTime.getDate() < 4)
          ) {
            pureBrightnessTime = new Date(nowTime.getFullYear(), 3, 4, 0, 0, 0);
          }
          // let pureBrightnessTime = new Date(nowTime.getFullYear(),3,5,0,0,0)
          // 设置倒计时时间
          this.countdownTime = pureBrightnessTime;
          // 格式化剩余时间
          this.formatDay();
        },
        // 五一倒计时
        fiveOne() {
          this.showText = "五一";
          // 获取当前时间
          let nowTime = new Date();
          // 获取五一时间
          let fiveOneTime;
          if (nowTime.getMonth() + 1 >= 5) {
            fiveOneTime = new Date(nowTime.getFullYear() + 1, 4, 1, 0, 0, 0);
          } else if (nowTime.getMonth() + 1 < 5) {
            fiveOneTime = new Date(nowTime.getFullYear(), 4, 1, 0, 0, 0);
          }
          // 设置倒计时时间
          this.countdownTime = fiveOneTime;
          // 格式化剩余时间
          this.formatDay();
        },
        // 国庆倒计时
        nationalDay() {
          this.showText = "国庆";
          // 获取当前时间
          let nowTime = new Date();
          // 获取国庆时间
          let nationalDayTime;
          if (nowTime.getMonth() + 1 >= 10) {
            nationalDayTime = new Date(
              nowTime.getFullYear() + 1,
              9,
              1,
              0,
              0,
              0
            );
          } else if (nowTime.getMonth() + 1 < 10) {
            nationalDayTime = new Date(nowTime.getFullYear(), 9, 1, 0, 0, 0);
          }
          // 设置倒计时时间
          this.countdownTime = nationalDayTime;
          // 格式化剩余时间
          this.formatDay();
        },
        // 自定义倒计时
        customBtn() {
          this.dialogVisible = true;
        },
        customBtnOk() {
          this.showText = "";
          // 获取当前时间
          let nowTime = new Date();
          // 获取自定义时间
          let customTime = this.customTime;
          this.countdownTime = this.customTime;
          // 格式化剩余时间
          this.formatDay();
          this.dialogVisible = false;
          this.customTime = null;
        },
        customBtnCancel() {
          this.dialogVisible = false;
          this.customTime = null;
        },
        handleChange() {
          var startAt = (new Date(this.customTime) * 1000) / 1000;
          if (startAt < Date.now()) {
            this.customTime = new Date();
          }
        },
      },
    });
  </script>
</html>
